<template>
	<view class="cinema-body">
        <view class="cinema-options-title">
            <view class="drowItem" @click="openMode('city')"><text>{{ localCity && localCity.name?localCity.name:'城市' }}</text> <uv-icon size="16" :name="visibliyMode == 'city'?'arrow-up-fill':'arrow-down-fill'"></uv-icon></view>
            <view class="drowItem" @click="openMode('county')"><text>{{localCounty && localCounty.name?localCounty.name:'区域'}}</text> <uv-icon size="16" :name="visibliyMode == 'county'?'arrow-up-fill':'arrow-down-fill'"></uv-icon></view>
        </view>
        <template v-if="visibliyMode == 'cinema'">
            <template v-if="isLoadding">
                <uv-loading-page :loading="isLoadding" :style="`border-radius:12px;`" loadingText="获取点亮影院中..." loading-mode="circle"></uv-loading-page>
            </template>
            <template v-else>
                <view class="cinema-options" v-if="cinemaList.length > 0">
                    <view class="cinema-option" v-for="(cinema,index) in cinemaList" :key="index" @click="change(cinema)">
                        <view class="cinema-option-desc">
                            <text>{{ cinema.name }}</text>
                            {{ cinema.address }}
                        </view>
                        <view class="cinema-option-icon">
                            <image
                            src="https://wx.sijiyoufu.com/static/imgs/project/power-icon.svg"
                            mode="aspectFit"
                            />
                            {{ cinema.cityname }}
                        </view>
                    </view>
                </view>
                <view style="margin-top:22vh;" v-else>
                    <uv-empty :text="`${localCity.name?localCity.name:''} ${localCounty.name?localCounty.name:''}没有发现活动影院`" width="72" icon="https://wx.sijiyoufu.com/static/imgs/sites/empty.svg"></uv-empty>
                </view>
            </template>
        </template>
        
        <view class="scroll-options" v-if="visibliyMode == 'city'">
            <City @change="changeCity"/>
        </view>
        <view class="scroll-options" v-if="visibliyMode == 'county'">
            <County @change="changeCounty" :citycode="localCity.citycode?localCity.citycode:''"/>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import { wzCinemaList } from "@/api/baseData"
import City from '@/components/city/index.vue'
import County from '@/components/city/countys.vue'
const emit = defineEmits([
    'change'
])

const change = (cinema : any) => {
    emit('change',cinema)
}
const changeCity = (res : any) => {
	localCity.value = res
	localCounty.value = {}
	getCinema()
	visibliyMode.value = 'cinema'
}
const changeCounty = (res : any) => {
	localCounty.value = res
	getCinema()
	visibliyMode.value = 'cinema'
}
const visibliyMode = ref<any>('cinema')
const openMode = (res : any) => {
    if(visibliyMode.value == res){
        visibliyMode.value = 'cinema'
        return
    }
	if(res == 'county' && !localCity.value.citycode){
		uni.showToast({icon:'none','title':'请先选择一个城市'})
		return
	}
    visibliyMode.value = res
}
const isLoadding = ref<any>(true)
const getCinema = () => {
    isLoadding.value = true
    cinemaList.value = []
	wzCinemaList({
        pageSize:1000,
        pageNo:1,
		citycode:localCity.value.citycode?localCity.value.citycode:'',
		countycode:localCounty.value.citycode?localCounty.value.id:'',
	}).then(res => {
        cinemaList.value = res.data.records
        isLoadding.value = false
	})
}

const cinemaList = ref<any>([])
const localCounty = ref<any>({})
const localCity = ref<any>({})
onMounted(async () => {
    localCounty.value = await uni.getStorageSync('county')
	localCity.value = await uni.getStorageSync('city')
    getCinema()
})
</script>
<style lang="scss">
.cinema-body{
    width: 100%;
    height: 100%;
    flex: 1;
    .cinema-options-title{
        padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.drowItem{
			display: flex;
			align-items: center;
			margin-right:16rpx;
            min-width: 22%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
			text{
				margin-right:22rpx;
			}
		}
    }
    .cinema-options{
        padding: 32rpx;
        width: 100%;
        box-sizing: border-box;
        height: 92%;
        overflow: hidden;
        overflow-y: scroll;
        .cinema-option{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background:#fff;
            border-radius: 9px;
            margin-bottom:32upx;
            padding:32upx;
            .cinema-option-desc{
                display: flex;
                flex-direction: column;
                width:72%;
                font-size: 24upx;
                text{
                    font-size: 32upx;
                    font-weight: 600;
                    padding-bottom: 6upx;
                }
            }
            .cinema-option-icon{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size:26upx;
                image{
                    width:36upx;
                    height:36upx;
                    margin-right: 24upx;
                }
            }
        }
    }
}
.scroll-options{
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
}
</style>